<template>
  <!--头部  -->
  <el-header>
    <div>
      <img src="@/assets/logo.png" alt="" class="logo">
      <span>智慧医疗决策支持系统</span>
    </div>
    <!-- 用户头像和退出按钮 -->
    <div v-show="show">
      <img :src="this.avatarUrl" alt="avatar" class="avatar">
      <span>{{ this.user.name }}</span>
      <el-button type="info" @click="logout">退出</el-button>
    </div>
  </el-header>
</template>

<script>

export default {
  name: 'HomePage',
  data() {
    return {
      show: true,
      user: {},
      avatarUrl: ''
    };
  },
  created() {
   console.log('1')
    //this.$router.push('/DataSets')

    
    if (this.$route.path !== '/login' && this.$route.path !== '/register') {
      console.log('1')
      // 发送请求获取用户信息和头像地址
      this.$axios.get('http://localhost/api/user/info', {
        headers: {'token': sessionStorage.getItem('token') }
      }).then(response => {
        console.log(response);
        this.user = response.data;
        this.avatarUrl = response.data.avatarUrl;
      }).catch(error => {
        alert('请先登录！')
        console.error('获取用户信息失败', error);
      });
    }
  
  },
  methods: {
    // 退出操作
    logout() {
      // 清空token
      window.sessionStorage.clear();
      // 将登录页面转入到登录界面
      this.$router.push('/login');
    }
  },
  watch: {
    '$route'() {
      this.show = !['/login', '/register'].includes(this.$route.path);
    }
  }
};
</script>

<style scoped lang="less">
.el-header {
  background-color: #2c3e50;
  display: flex;
  justify-content: space-between;
  padding-left: 0px;
  align-items: center;
  color: #fff;
  font-size: 20px;

  > div {
    display: flex;
    align-items: center;

    > .logo {
      max-height: 60px;
      max-width: 100%;
      height: auto;
      width: auto;
      margin-left: 20px;
    }

    > .avatar {
      border-radius: 50%;
      height: 40px;
      width: 40px;
      margin-left: 20px;
    }

    > span {
      margin-left: 20px;
    }
  }
}
</style>
